<template>
  <el-dialog :title="'修改签到状态'" :visible.sync="visible" width="500px" :close-on-click-modal="false" append-to-body>
    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" size="small" label-width="120px" label-position="right">
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="老师姓名">
            <el-input v-model="dataForm.teacherName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="签到日期">
            <el-input v-model="dataForm.signDate" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="签到时段">
            <el-input v-model="periodLabel" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="原签到状态">
            <el-tag :type="getStatusTagType(dataForm.originalStatus)" size="small">
              {{ getStatusLabel(dataForm.originalStatus) }}
            </el-tag>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="新签到状态" prop="status">
            <el-select v-model="dataForm.status" placeholder="请选择新状态" :style="{ width: '100%' }">
              <el-option label="正常签到" value="Normal" />
              <el-option label="迟到" value="Late" />
              <el-option label="请假" value="Leave" />
              <el-option label="早退" value="EarlyLeave" />
              <el-option label="缺勤" value="Absent" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="dataForm.status !== 'Absent'">
          <el-form-item label="签到时间" prop="signTime">
            <el-date-picker v-model="dataForm.signTime" type="datetime" placeholder="请选择签到时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :style="{ width: '100%' }" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="修改原因" prop="remark">
            <el-input v-model="dataForm.remark" type="textarea" placeholder="请输入修改原因" :rows="3" maxlength="500" show-word-limit />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" :loading="loading">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { updateSignRecord } from '@/api/campus/trainSignRecord'

export default {
  data() {
    return {
      visible: false,
      loading: false,
      dataForm: {
        id: '',
        teacherName: '',
        signDate: '',
        period: '',
        originalStatus: '',
        status: '',
        signTime: '',
        remark: ''
      },
      dataRule: {
        status: [{ required: true, message: '请选择新状态', trigger: 'change' }],
        remark: [{ required: true, message: '请输入修改原因', trigger: 'blur' }]
      }
    }
  },
  computed: {
    periodLabel() {
      const periodMap = {
        'AM': '上午',
        'PM': '下午',
        'EVE': '晚上'
      }
      return periodMap[this.dataForm.period] || this.dataForm.period
    }
  },
  watch: {
    'dataForm.status'(newVal) {
      // 如果选择缺勤，清空签到时间
      if (newVal === 'Absent') {
        this.dataForm.signTime = ''
      } else if (!this.dataForm.signTime) {
        // 如果不是缺勤且没有签到时间，设置为当前时间
        this.dataForm.signTime = this.$moment().format('YYYY-MM-DD HH:mm:ss')
      }
    }
  },
  methods: {
    init(record) {
      this.dataForm = {
        id: record.id,
        teacherName: record.teacherName,
        signDate: record.signDate,
        period: record.period,
        originalStatus: record.status,
        status: record.status,
        signTime: record.signTime,
        remark: ''
      }
      this.visible = true
      this.$nextTick(() => {
        this.$refs.dataForm.clearValidate()
      })
    },
    getStatusLabel(status) {
      const statusMap = {
        'Normal': '正常签到',
        'Late': '迟到',
        'Leave': '请假',
        'EarlyLeave': '早退',
        'Absent': '缺勤'
      }
      return statusMap[status] || status
    },
    getStatusTagType(status) {
      const typeMap = {
        'Normal': 'success',
        'Late': 'warning',
        'Leave': 'info',
        'EarlyLeave': 'warning',
        'Absent': 'danger'
      }
      return typeMap[status] || ''
    },
    dataFormSubmit() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          // 如果状态没有改变，提示用户
          if (this.dataForm.status === this.dataForm.originalStatus) {
            this.$message.warning('签到状态未发生变化')
            return
          }
          
          // 如果不是缺勤状态，必须有签到时间
          if (this.dataForm.status !== 'Absent' && !this.dataForm.signTime) {
            this.$message.warning('请选择签到时间')
            return
          }
          
          this.loading = true
          const submitData = {
            id: this.dataForm.id,
            status: this.dataForm.status,
            signTime: this.dataForm.status === 'Absent' ? null : this.dataForm.signTime,
            remark: this.dataForm.remark
          }
          
          updateSignRecord(submitData).then(res => {
            this.$message({
              message: res.msg || '修改成功',
              type: 'success',
              duration: 1000,
              onClose: () => {
                this.visible = false
                this.loading = false
                this.$emit('refresh')
              }
            })
          }).catch(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>